<script setup lang="ts">
  import { loginByAccountApi } from '@/pages/apis/user'
  import { useUserStore } from '@/stores/user'
  import { ref } from 'vue'
  // 用户相关的数据
  const userStore = useUserStore()
  defineOptions({
    options: {
      styleIsolation: 'shared',
    },
  })
  // 表单组件 ref
  const form = ref<UniHelper.UniFormsInstance>()
  // 表单数据
  const formData = ref({
    mobile: '13230000005',
    password: 'abc12345',
  })
  // 验证表单数据的规则
  const formRules: UniHelper.UniFormsRules = {
    mobile: {
      rules: [
        { required: true, errorMessage: '请填写手机号码' },
        { pattern: '^1\\d{10}$', errorMessage: '手机号码格式不正确' },
      ],
    },
    password: {
      rules: [
        { required: true, errorMessage: '请输入密码' },
        {
          pattern: '^(?=.*[a-zA-Z])(?=.*\\d)[a-zA-Z\\d]{8,}$',
          errorMessage: '密码必须包含字母和数字，且长度至少为 8 位',
        },
        {
          pattern: '^.{0,16}$',
          errorMessage: '密码长度不能超过16位',
        },
      ],
    },
  }
  // 提交表单
  const onSubmit = async () => {
    try {
      // 校验表单所有字段
      await form.value?.validate?.()
      // 判断是否同意用户协议
      if (!isAgree.value) {
        return uni.showToast({ title: '请勾选同意用户协议', icon: 'none' })
      }
      const res = await loginByAccountApi(formData.value)
      console.log('登录成功', res)
      // 持久化存储 token
      userStore.token = res.token
      uni.showToast({ title: '登录成功', icon: 'success' })
      // 临时跳转到首页面
      uni.switchTab({
        url: '/pages/index/index',
      })
      //  console.log('登录成功', res)
    } catch (error: any) {
      console.log(error)
      // 判断是否是服务器返回的错误
      if (error.code && error.success === false) {
        uni.showToast({
          title: '登录失败：' + error.message,
          icon: 'error',
        })
      } else if (Array.isArray(error)) {
        // 如果是表单验证错误数组，显示每个字段的错误信息
        for (const err of error) {
          uni.showToast({
            title: '登录失败：' + err.errorMessage,
            icon: 'error',
          })
        }
      } else {
        uni.showToast({
          title: '登录失败：未知错误',
          icon: 'error',
        })
      }
    }
  }
  // 是否同意用户协议
  const isAgree = ref(false)
</script>

<template>
  <uni-forms class="login-form" ref="form" :rules="formRules" :model="formData">
    <uni-forms-item name="mobile">
      <uni-easyinput
        v-model="formData.mobile"
        :input-border="false"
        :clearable="false"
        placeholder="请输入手机号"
        placeholder-style="color: #C3C3C5"
      />
    </uni-forms-item>
    <uni-forms-item name="password">
      <uni-easyinput
        v-model="formData.password"
        type="password"
        placeholder="请输入密码"
        :input-border="false"
        placeholder-style="color: #C3C3C5"
      />
    </uni-forms-item>
    <view class="agreement">
      <radio :checked="isAgree" @click="isAgree = !isAgree" color="#16C2A3" />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button @click="onSubmit()" class="uni-button">登 录</button>
    <navigator hover-class="none" class="uni-navigator" url=" "> 忘记密码？ </navigator>
  </uni-forms>
</template>

<style lang="scss">
  @import './styles.scss';
</style>
